<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>服务单报表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="resources/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="resources/css/public.css" media="all"/>
</head>
<body>
<div class="layui-container" style="margin-top: 10px">
    <div id="main" style="width: 600px;height:400px;"></div>
</div>
<script type="text/javascript" src="resources/layui/layui.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script th:inline="none">
    layui.use(['form', 'layer', 'laydate', 'table', 'laytpl'], function () {
        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : top.layer,
            $ = layui.jquery,
            laydate = layui.laydate,
            laytpl = layui.laytpl,
            table = layui.table;
        var mydata=[];



        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '服务累计报表'
            },
            tooltip: {},
            legend: {
                data:['服务量']
            },
            xAxis: {
                data: ["投诉","建议","咨询"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: function(params) {
                            // build a color map as your need.
                            var colorList = [
                                '#27727B',
                            ];
                            return colorList[params.dataIndex]
                        },
                        label: {
                            show: true,
                            position: 'top',
//                             formatter: '{c}'
                            formatter: '{b}\n{c}'
                        }
                    }
                },
                data: [],
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        setTimeout(function() {
        $.get("serviceType.do",function (data) {

            if (data) {
                for(var i=0;i<data.length;i++){
                    mydata.push(data[i].scabbr);    //挨个取出类别并填入类别数组
                }}
                mydata=data;

            myChart.setOption({        //加载数据图表
                series: [{
                    // 根据名字对应到相应的系列
                    name: '销量',
                    data: mydata
                }]
            });


        })
        }, 10);


    });
</script>
</body>
</html>